<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
    </table-ext>
  </div>
</template>
<script>
   import TableExt from '@/components/common/table-ext/table-ext.vue';
   import TableIcon from '@/components/common/table-ext/table-icon';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return{
        config:{ // 页面共通配置
          title: '物料', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: false, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.masterData + "/mdata/material/query"
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '物料:', 
          //数据字段
          key: 'materialCode', 
          //标签类型
          type: 'input' 
        },{
          label: '创建开始时间:',
          key: 'establishDateStart',
          type: 'date'
        },{
          label: '创建结束时间:',
          key: 'establishDateEnd',
          type: 'date'
        }],
        // 表格列定义
        columns:[{
          label: '物料编码',
          key: 'materialCode',
          align:'center',
          width:'180'
        },{
          label: '物料名称',
          key: 'materialName',
          align:'center',
          width:'300px'
        },{
          label: '英文名称',
          key: 'materialNameEn',
          align:'center',
          width:'300px'
        },{
          label: '基本单位',
          key: 'stockUnitCode',
          align:'center'
        },{
          label: '创建时间',
          key: 'createTime',
          width:'180',
          align:'center'
        },{
          label: '位置号',
          key: 'locationNo',
          align:'center'
        },{
          label: '来源号',
          key: 'sourceNo',
          align:'center'
        },{
          label: '是否可以集采',
          align:'center',
          width:'120',
          key: 'cpFlag',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.cpFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        }]
      }
    }
   }
</script>